import React from 'react'
import {connect} from 'react-redux'
import CSSModules from 'react-css-modules'
import styles from './detaillist.css'
import { intlShape, injectIntl } from 'react-intl'
import {answerLike} from '../../actions.js'

@injectIntl
@connect(null, {answerLike})
@CSSModules(styles, { allowMultiple: true })
export default class Answer extends React.Component {
  static propTypes = {
    // date: React.PropTypes.string,
    // content: React.PropTypes.string,
    answer: React.PropTypes.object,
    // praise: React.PropTypes.number,
    // stamp: React.PropTypes.number,
    intl: intlShape.isRequired,
    answerLike: React.PropTypes.func
    // author: React.PropTypes.string
  }

  render() {
    const {answer, intl: {formatDate}} = this.props
    if (!answer) {
      return <div />
    }
    const {author, date, praise, stamp, description} = answer
    return (
      <div styleName='blockAnswer'>
        <div styleName='clearfix'>
          <div styleName='statbar left'>
            <span styleName='author'>
              {author}
            </span>
            <span styleName='time'>
              {formatDate(date)}
            </span>
          </div>
          <div styleName='statbar right'>
            <span styleName='praise' onClick={() => { this.props.answerLike(answer.id) }}>
              <i styleName='iconPraise' />
              <span styleName='number'>{praise}</span>
            </span>
            <span styleName='stamp'>
              <i styleName='iconStamp' />
              <span styleName='number'>{stamp}</span>
            </span>
          </div>
        </div>
        <div styleName='content'>
          {description}
        </div>
      </div>
    )
  }
}
